<template>
  <section>
    <global-form class="main-box">
      <global-form-item label="开始时间:">
        <el-date-picker
          v-model="Date.now()"
          type="date"
          placeholder="选择日期"
          style="width: 160px;"
        ></el-date-picker>
      </global-form-item>
      <global-form-item label="结束时间:">
        <el-date-picker
          v-model="Date.now()"
          type="date"
          placeholder="选择日期"
          style="width: 160px;"
        ></el-date-picker>
      </global-form-item>
      <global-form-item label="关键字:">
        <el-input style="width: 160px;"></el-input>
      </global-form-item>
      <global-form-item>
        <el-button
          type="primary"
          :loading="true"
        >加载中</el-button>
      </global-form-item>
    </global-form>
    <div class="main-box">
      <h4 style="color: #fd6f42;padding-bottom: 15px;">待办事项</h4>
      <el-table
        show-header
        :data="tableData"
        style="width: 100%;border: 1px solid #ebeef5;border-bottom: 0 none;"
        :header-cell-style="{background:'#f8f8f9'}"
      >
        <el-table-column
          prop="title"
          align="center"
          label="标题"
        ></el-table-column>
        <el-table-column
          prop="createDate"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="targetDate"
          align="center"
          label="预计时间"
        ></el-table-column>
        <el-table-column
          prop="isOk"
          align="center"
          label="是否延期"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.isOk"
              type="danger"
            >延期</el-tag>
            <el-tag
              v-else
              type="success"
            >完成</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </section>
</template>
<script>
import { Button, Input, DatePicker, Table, TableColumn, Tag } from 'element-ui';
import axios from '@/axios';
export default {
    name: 'tasks',
    data() {
        return {
            tableData: [
                {
                    title: '编写测试用例',
                    createDate: Date.now(),
                    targetDate: Date.now(),
                    isOk: false
                },
                {
                    title: '筹备架构方案',
                    createDate: Date.now(),
                    targetDate: Date.now(),
                    isOk: true
                },
                {
                    title: '开发基础功能',
                    createDate: Date.now(),
                    targetDate: Date.now(),
                    isOk: false
                },
                {
                    title: '反思',
                    createDate: Date.now(),
                    targetDate: Date.now(),
                    isOk: false
                }
            ]
        };
    },
    created() {},
    components: {
        elButton: Button,
        elInput: Input,
        elDatePicker: DatePicker,
        elTable: Table,
        elTableColumn: TableColumn,
        elTag: Tag
    }
};
</script>